<!-- xiaomu封装的组件：签约管理、服务管理、居民管理的 对应服务的编辑表单 -->
<template>
  <div class="mu-resident-info-box">
    <!-- 表格 -->
    <el-form ref="formRef" :model="formData" :rules="rules" require-asterisk-position="right" label-width="auto">
      <el-form-item v-if="!isShowSelectName" label="姓名" prop="name">
        <el-input v-model.number="formData.name" clearable placeholder="请输入" :disabled="isDisableNameInput" />
      </el-form-item>
      <el-form-item v-if="isShowSelectName" label="选择居民" prop="residentId">
        <el-select v-model="formData.residentId" size="default" clearable placeholder="请选择">
          <el-option :label="`${item.name ?? '未知'} ${item.gender ? '女' : '男'}`" :value="item._id"
            v-for="item in residentData" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="IDnumber">
        <el-input v-model.number="formData.IDnumber" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="formData.gender" size="default" clearable placeholder="请选择">
          <el-option label="男" :value="0" />
          <el-option label="女" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="出生年月" prop="birthday">
        <el-date-picker v-model="formData.birthday" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
          size="default" clearable />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model.number="formData.phone" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="现居地">
        <el-input v-model="formData.address" clearable placeholder="请输入" />
      </el-form-item>
      <!-- 密码框 -->
      <el-form-item v-if="isShowPwdInput" label="密码" prop="password">
        <el-input v-model="formData.password" clearable placeholder="请输入" />
      </el-form-item>
    </el-form>
    <!-- 家庭成员 -->
    <div style="display: flex;">
      <span style="font-size: 14px;">家庭成员</span>
      <mu-family-item />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

import type { FormInstance } from 'element-plus'
import { getResidentDetailApi, searchResidentsApi } from '@/api/resident';

const emit = defineEmits(['updateSign']);

const formData: any = defineModel('formData');

const {
  isShowSelectName,
  isDisableNameInput = true,
  isSearchResident = true,
  isShowPwdInput = false
} = defineProps(['isShowSelectName', 'isDisableNameInput', 'isSearchResident', 'isShowPwdInput']);

const formRef = ref<FormInstance>();

// 表单验证规则
const rules: any = ref({
  name: [
    { required: true, message: '必填项' }
  ],
  residentId: [
    { required: true, message: '必填项' }
  ],
  IDnumber: [
    { required: true, message: '必填项' }
  ],
  gender: [
    { required: true, message: '必填项' }
  ],
  birthday: [
    { required: true, message: '必填项' }
  ],
  phone: [
    { required: true, message: '必填项' }
  ],
  password: [
    { required: true, message: '必填项' }
  ],
});

const residentData: any = ref({});



watch(() => formData.value.residentId, () => {
  getResidentDetail(formData.value.residentId);
})



onMounted(() => {
  if (!formData._id && isSearchResident) {
    getServicesDetail();
  }
})



// 获取 某个用户详情
const getResidentDetail = async (_id: string) => {
  const res = await getResidentDetailApi({
    _id
  });
  // console.log(res);
  if (res.code == 200) {
    // 给表单赋值
    for (let key in res.data) {
      if (key == '_id') {
        formData.value.residentId = res.data._id;
        continue;
      }
      formData.value[key] = res.data[key];
    }
  }
}

const getServicesDetail = async () => {
  const res = await searchResidentsApi();
  console.log(res);
  if (res.code == 200) {
    residentData.value = res.data.rows;
  }
};

const onSubmit = async () => {
  let isPassed = ref(true);
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    isPassed.value = valid;
  })
  return isPassed.value;
}



defineExpose({
  onSubmit
});
</script>

<style scoped lang="scss">
.mu-resident-info-box {

  // 去掉 label 左外边距
  :deep(.el-form-item__label-wrap) {
    // margin-left: 0 !important;
  }

  .el-form {
    display: grid;
    grid-template-columns: repeat(4, 340px);
    grid-template-rows: repeat(2, 50px);
    justify-content: space-between;
  }
}
</style>